<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
		<!-- 	<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view> -->
		</view>
		<view class="container">
			<loading
				ref="loading"
				:custom="false"
				:shadeClick="false"
				:type="2"
				@callback="callback()">
			</loading>
			
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  >
				<view class="text-wra">
					<view class="text-box">
						<view @click="backlast()">
							<image src="../../static/backs.png"></image>
						</view>
						<view class="txt">
							<view>商户名称：{{name}}</view>
							<view>签收状态：{{signedIn}}</view>
						</view>
					</view>
					<view class="model">
						<view>日期查询</view>
						<input :placeholder="today" type="date"  disabled="disabled">
						<uni-calendar :date="today" ref="statisDate" :insert="false" :lunar="false" :range="false" :clearDate="true"
						@change="changeDate"
						@confirm= "condirmDate"
						@monthSwitgh="changMonth"></uni-calendar>
						<image :src="url()+'/wximg/arrowrt.png'" style="width:20px; height:20px;" @click="openCalendar"></image>
					</view>
				</view>
			</view>

			<view class="wrapper" :style="{height: heightContent+'px'}">
				<view class="tableBox">
					<view class="tabletitle">{{signedIn}}</view>
					<view class="table">
						<wyb-table 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						content-ft-color="#333333" 
						:height="heightContent-50 + 'px'"
						show-vert-border="false" 
						header-weight="true" 
						ref="table" 
						border-color="#ffffff"
						:key="key"
						:headers="headers2" 
						:contents="contents2" 
						width="100%" 
						:loading="loading"
						 @onCellClick="onCellClick"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import loading from '@/components/xuan-loading/xuan-loading.vue'
	import {SelectDeliveryTaskDetailList} from '@/api/request.js';
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		components: {
			wybTable,
			loading
		},
		data() {
			return {
				url:url,
				heightContent:'',
				name: '',
				signedIn:'已签收',
				//表格
				key:0,
				today:'',
				deliveryTime:'',
				loading:true,
				headers2:[],
				contents2:[],
				// 表格数据
				headers: [{
					label: '商户名称',
					key: 'shopName',
					width:190,
				}, {
					label: '日期',
					key: 'deliveryConfirmTime',
					width:160,
				}, {
					label: '配送员',
					key: 'deliveryUserName',
					width:180,
				}, {
					label: '数量',
					key: 'packageCount',
					width:140,
				}
				],
				contents: [],
				urlCol: []
			};
		},
		onLoad() {
			user=service.getUsers().user;
			this.name=user.customerShop.shopName;
			//表格加载动画
		},
		onShow(){
			this.deliveryTime = ''
			this.init();
		},
		onReady(){
				let _that = this
				uni.getSystemInfo({
					success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
					// res - 各种参数
			　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
			　　　  info.boundingClientRect(function(data) { //data - 各种参数
						 let view  = res.windowHeight - data.top
						 _that.heightContent = view
		　　        }).exec()
					}
				});		
			},
		methods: {
			backlast(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			changeDate(e){
				console.log(e)
			},
			changMonth(e){
				console.log(e)
			},
			openCalendar(){
				this.$refs.statisDate.open()
			},
			condirmDate(e){
				this.deliveryTime = e.year+"."+e.month+"."+this.isZero(e.date)
				this.init();
				this.today = e.fulldate
			},
			//表格
			onCellClick(e) {
				uni.navigateTo({
					url: '/pages/merchantsSIn/signedInDetail?data='+encodeURIComponent(JSON.stringify(e)),
				})
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			isZero(m){
			    return m<10?'0'+m:m
			},
            init(){//初始化列表
				let date = new Date();
				let year = date .getFullYear();
				let month = date .getMonth()+1;
				let day = date .getDate();
				this.today = this.isZero(year)+"-"+this.isZero(month)+"-"+this.isZero(day)
				if(this.deliveryTime == ''){
					this.deliveryTime = this.isZero(year)+"."+this.isZero(month)+"."+this.isZero(day)
				}
				this.open();
				let  param={
					shopId:user.customerShop.id,
					deliveryConfirmTime:this.deliveryTime,
					/* deliveryStatus:2, */
					deliveryStatusList:["2","4","5"]
				};
				//配送状态 0已装车  1配送中  2已验签  3已分拣  4未送达  5已送达
				SelectDeliveryTaskDetailList(param).then(res => {
					this.close()
					if (res.code == 200) {
					this.contents=res.map.data;
					/* this.wait(1000).then(() => { */
						this.headers2 = this.headers.slice()
						this.contents2 = this.contents.slice()
						this.loading = false
				/* 	}) */
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					this.close()
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
			},
			close:function(){
				this.$refs.loading.close();
			},
			open:function(){
				this.$refs.loading.open();
			},
			callback(){
				console.log("加载关闭后回掉");
			},

		},

	}
</script>

<style scoped>
	/* 导航栏 */
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index:0;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
	}

/* 	.text-box {
		position: absolute;
		color: #fff;
		bottom: 90upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		font-size: 32upx;
	} */
	.text-box {		
		color: #fff;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
	}
	.text-box image {
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.text-box .txt{
		
	}
	.tableBox {
		width: 100%;
		margin-top: 89upx;
		padding-bottom: 40upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	.table {
		width: 96%;
		margin: 0 auto;
	}


	.text-wra {
		position: absolute;
		bottom:150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
	}
	.model {
		width: 91%;
		margin: 0 auto;
		bottom: -180upx;
		padding: 35upx 5%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		font-size:32upx;
		box-shadow: 0 5px 5px rgba(227,227,227,.5);
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height:70upx;
	}
	.model  input {
		height: 70rpx;
		line-height: 70upx;
		display: block;
	}
</style>
